<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
	<title>修改密码</title>
    <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/pageCommon.js" charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/PageUtils.js" charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/DemoData.js" charset="utf-8"></script>
	<script language="javascript" src="${pageContext.request.contextPath}/script/DataShowManager.js" charset="utf-8"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/pageCommon.css" />
    <script type="text/javascript">
        let isCheckNewPwd = false;
        //检查密码是否一致
        function checkPwd(pwd) {
            if (isNewPwd) {
                let newPwd = $("#newPassword").val();
                if (pwd !== newPwd) {
                    $("#checkPwd").html('<font color="red">两次密码不一致</font>');
                } else {
                    $("#checkPwd").html('<font color="green">密码一致</font>');
                    isCheckNewPwd = true;
                }
            }
        }

        let isNewPwd = false;
        //检查新密码格式
        function newPwdNum(pwd) {
            checkPwd($("#checkPassword").val())
            if (isOldPwd) {
                if (pwd.length < 6) {
                    $("#newPwd").html('<font color="red">密码长度因大于6位</font>');
                } else {
                    $("#newPwd").html('');
                    isNewPwd = true;
                }
            }
        }

        let isOldPwd = false;
        //检查旧密码
        function checkOldPwd(pwd) {
            if (pwd != null && pwd !== '') {
                $.ajax({
                    "url":"${pageContext.request.contextPath}/user/checkPwd",
                    "type":"post",
                    "data":{password: pwd},
                    "success":function (resp){
                        if (resp==="0") {
                            $("#oldPwd").html('<font color="red">原密码错误</font>');
                        } else {
                            $("#oldPwd").html('');
                            isOldPwd = true;
                        }
                    }
                })

            }
        }

        function updatePwd() {
            let url = "${pageContext.request.contextPath}/user/editPassword"
            //判断是否可以修改密码
            if (isCheckNewPwd) {
                let pwd = $("#newPassword").val();
                $.ajax({
                    "url":url,
                    "type":"post",
                    "data":{password:pwd}
                })
            }else {
                if (!isOldPwd) {
                    return alert("请输入旧密码")
                }
                if (!isNewPwd) {
                    return alert("新密码格式有误")
                }
                if (!isCheckNewPwd) {
                    return alert("两次密码不一致")
                }
            }

        }
    </script>
</head>
<body>

<!-- 标题显示 -->
<div id="Title_bar">
    <div id="Title_bar_Head">
        <div id="Title_Head"></div>
        <div id="Title"><!--页面标题-->
            <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 修改密码
        </div>
        <div id="Title_End"></div>
    </div>
</div>

<!--显示表单内容-->
<div id=MainArea>
    <form>
        <!-- 表单内容显示 -->
        <div class="ItemBlockBorder">
            <input hidden="hidden" type="text" value="${loginUser.uid}">
            <div class="ItemBlock">
                <table cellpadding="0" cellspacing="0" class="mainForm">
					<tr height="50">
						<td width="150">
							<img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" />
							请输入原密码
						</td>
						<td>
                            <input type="password" name="oldPassword" class="InputStyle" id="oldPassword" onblur="checkOldPwd(this.value)"/> *
                            <div id="oldPwd"></div>
                        </td>
					</tr>
					<tr height="25">
						<td width="150">
							<img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" />
							请填写新密码
						</td>
						<td>
                            <input type="password" name="password" class="InputStyle" id="newPassword" onblur="newPwdNum(this.value)"/> *
                            <div id="newPwd"></div>
                        </td>
						<td></td>
					</tr>
					<tr height="25">
						<td  width="150">
							<img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" />
							再次输入新密码
						</td>
						<td>
                            <input type="password" name="password2" class="InputStyle" id="checkPassword" onblur="checkPwd(this.value)"/>
                            <div id="checkPwd"></div>
                        </td>
						<td></td>
					</tr>
                </table>
            </div>
        </div>
       
        <!-- 表单操作 -->
        <div id="InputDetailBar">
            <a onclick="updatePwd()" id="submit"><input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/></a>
            <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a>
        </div>
    </form>
</div>

<div class="Description">
	验证规则：<br />
	1，旧密码不能为空。<br />
	2，新密码不能为空。<br />
	3，再次输入的密码要和新密码一致。<br />
</div>

</body>
</html>
